<template>
  <CollapsibleSection
    title="基本信息"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <view class="space-y-[16rpx]">
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">被监护人姓名:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentMember?.name || '暂无' }}</text>
      </view>

      <view class="flex items-center">
        <text class="text-[24rpx] lwds">被监护人AnfineID:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ '暂无' }}</text>
      </view>
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">被监护人证件号:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentMember?.idCard || '暂无' }}</text>
      </view>
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">被监护人就诊时间:</text>
        <view 
          class="flex-1 flex items-center justify-between bg-white"
          @click="showCalendarPopup = true"
        >
          <text class="text-[24rpx]" :class="formData.visitTime ? 'text-gray-800' : 'text-gray-400'">
            {{ formData.visitTime ? formatVisitTime(visitTimeValue) : '请选择就诊时间' }}
          </text>
          <text class="text-[24rpx] text-gray-400">▼</text>
        </view>
      </view>
    </view>

    <!-- 被监护人信息 -->
    <view class="space-y-[16rpx] mt-[20rpx]">
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">监护人姓名:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentFamilyMember?.name || '暂无' }}</text>
      </view>
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">监护人AnfineID:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentMember?.AnfineID || '暂无' }}</text>
      </view>
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">监护人关系:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentMember?.relationName || '暂无' }}</text>
      </view>
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">监护人证件号:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentFamilyMember?.idcard || '暂无' }}</text>
      </view>
      <view class="flex items-center">
        <text class="text-[24rpx] lwds">监护人电话:</text>
        <text class="text-[24rpx] text-gray-800 flex-1">{{ currentFamilyMember?.phone || '暂无' }}</text>
      </view>
    </view>
    <!-- 就诊时间日历弹窗 -->
    <nut-popup 
      v-model:visible="showCalendarPopup" 
      position="bottom" 
      :style="{ height: '70%' }"
      round
    >
      <view class="calendar-popup">
        <view class="popup-header">
          <text class="popup-title">选择就诊时间</text>
          <view class="close-btn" @click="showCalendarPopup = false">
            <text>✕</text>
          </view>
        </view>
        
        <view class="calendar-content">
          <nut-calendar-card v-model="visitTimeValue" @change="onVisitTimeChange"></nut-calendar-card>
        </view>
        
        <view class="popup-footer">
          <nut-button 
            type="default" 
            class="flex-1"
            @click="showCalendarPopup = false"
          >
            取消
          </nut-button>
          <nut-button 
            type="primary" 
            class="flex-1 ml-3"
            @click="confirmVisitTime"
          >
            确定
          </nut-button>
        </view>
      </view>
    </nut-popup>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMedicalRecordStore } from '@/store/modules'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import { useAuthStore } from "@/store";

const authStore = useAuthStore();
const currentMember = computed(() => authStore.getCurFamilyMember)

// 获取当前家庭成员信息
const currentFamilyMember = computed(() => authStore.nurseUser);

setTimeout(() => {
  console.log("authStore ---1233", authStore.nurseUser);
  console.log("currentFamilyMember", currentFamilyMember.value);
}, 3000);

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const medicalRecordStore = useMedicalRecordStore()

const formData = computed(() => {
  const storeData = medicalRecordStore.getData
  if (storeData) {
    return storeData
  }
  return medicalRecordStore.getDefaultFormData()
})

// const updateField = (field: string, value: any) => {
//   console.log("更新字段:", field, value)
//   medicalRecordStore.updateField(field as any, value)
// }

// 控制日历弹窗显示
const showCalendarPopup = ref(false)

// 就诊时间日历值
const visitTimeValue = computed({
  get: () => {
    const visitTime = formData.value?.visitTime
    if (!visitTime) return new Date()
    
    try {
      const date = new Date(visitTime)
      return isNaN(date.getTime()) ? new Date() : date
    } catch (error) {
      console.error("解析就诊时间失败:", error)
      return new Date()
    }
  },
  set: (val: Date) => {
    if (val) {
      medicalRecordStore.updateField("visitTime", val.toISOString())
    }
  }
})

// 日历组件变化事件
const onVisitTimeChange = (val: Date) => {
  console.log("就诊时间变化:", val)
  if (val) {
    medicalRecordStore.updateField("visitTime", val.toISOString())
  }
}

// 确认选择就诊时间
const confirmVisitTime = () => {
  showCalendarPopup.value = false
  console.log("确认就诊时间:", visitTimeValue.value)
}

// 格式化就诊时间显示
const formatVisitTime = (date: Date) => {
  if (!date) return ''
  
  try {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    
    return `${year}年${month}月${day}日`
  } catch (error) {
    console.error("格式化时间失败:", error)
    return ''
  }
}
</script>

<style scoped lang="scss">
.lwds{
  width: 240rpx;
  color: #a4a4a4;
}
// 日历弹窗样式
.calendar-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      position: absolute;
      right: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 56rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      color: #999;
      cursor: pointer;
      
      &:active {
        opacity: 0.6;
      }
    }
  }
  
  .calendar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16rpx;
  }
  
  .popup-footer {
    display: flex;
    gap: 24rpx;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    border-top: 1rpx solid #f0f0f0;
    
    .nut-button {
      flex: 1;
      height: 80rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
